<form method="post" key="set-mine" enctype="multipart/form-data" action="/admin/webim/invote/save.html" class="layui-form">
	<#if inviteData??>
		<input type="hidden" name="id" value="${inviteData.id!''}">
		<input type="hidden" name="snsaccountid" value="${inviteData.snsaccountid!''}">
	</#if>
	<div class="row">
		<div class="col-lg-12">
			<div class="ukefu-customer-div setting-wrapper">
				<div class="box default-box">
					<div class="box-header">
						<h3 class="box-title">邀请框设置</h3>
					</div>
					<div class="box-body ukefu-im-theme">
						<div class="row">
							<div class="col-lg-7">
								<div class="ukefu-webim-prop">
									<div class="ukefu-webim-tl" style="clear:both;">1、启用访客邀请功能</div>
									<div class="box-item">
										<div class="row">
											<div class="col-lg-8">
												<p>访客自动弹出邀请框，可以设置邀请文字和邀请按钮</p>
												<p style="color:#888888;font-size:13px;margin-top:10px;">默认启用访客邀请功能</p>
											</div>
											<div class="col-lg-4" style="text-align:right;">
												<input type="checkbox" title="启用" name="consult_invite_enable" value="1" <#if inviteData.consult_invite_enable>checked="checked"</#if>>
											</div>
										</div>
									</div>
								</div>
								<div class="ukefu-webim-prop">
									<div class="ukefu-webim-tl" style="clear:both;">2、邀请提示文字</div>
									<div class="box-item">
										<div class="row">
											<div class="col-lg-12">
												<textarea name=consult_invite_content autocomplete="off" class="layui-input" onkeyup="$('#ukefu-cousult-invite-content').text($(this).val())" resize="false" style="height:90px;line-height:22px;resize: none;">${inviteData.consult_invite_content!'欢迎来到本网站，请问有什么可以帮您？'}</textarea>	
											</div>
										</div>
									</div>
								</div>
								<div class="ukefu-webim-prop">
									<div class="ukefu-webim-tl" style="clear:both;">3、选择邀请框背景</div>
									<div class="box-item">
										<input type="hidden" name="consult_invite_color" id="consult_invite_color" value="<#if inviteData??>${inviteData.consult_invite_color!'1'}<#else>1</#if>"> 
										<div class="item-cnt ukefu-im-ping-color" style="display: block;">
											<div class="ukefu-im-item theme1 <#if !(inviteData?? && inviteData.consult_invite_color??) || (inviteData?? && inviteData.consult_invite_color?? && inviteData.consult_invite_color == '1')>ukefu-im-checked</#if>"
												data-class="theme1" data-value="1">
												<i
													class="layui-icon ukefu-im-check">&#xe618;</i>
											</div>
											<div class="ukefu-im-item theme2 <#if inviteData?? && inviteData.consult_invite_color?? && inviteData.consult_invite_color == '2'>ukefu-im-checked</#if>" data-class="theme2" data-value="2">
												<i
													class="layui-icon ukefu-im-check">&#xe618;</i>
											</div>
											<div class="ukefu-im-item theme3 <#if inviteData?? && inviteData.consult_invite_color?? && inviteData.consult_invite_color == '3'>ukefu-im-checked</#if>" data-class="theme3" data-value="3">
												<i
													class="layui-icon ukefu-im-check">&#xe618;</i>
											</div>
											<div class="ukefu-im-item theme4 <#if inviteData?? && inviteData.consult_invite_color?? && inviteData.consult_invite_color == '4'>ukefu-im-checked</#if>" data-class="theme4" data-value="4">
												<i
													class="layui-icon ukefu-im-check">&#xe618;</i>
											</div>
											<div class="ukefu-im-item theme5 <#if inviteData?? && inviteData.consult_invite_color?? && inviteData.consult_invite_color == '5'>ukefu-im-checked</#if>" data-class="theme5" data-value="5">
												<i
													class="layui-icon ukefu-im-check">&#xe618;</i>
											</div>
											<div class="ukefu-im-item theme6 <#if inviteData?? && inviteData.consult_invite_color?? && inviteData.consult_invite_color == '6'>ukefu-im-checked</#if>" data-class="theme6" data-value="6">
												<i
													class="layui-icon ukefu-im-check">&#xe618;</i>
											</div>
										</div>
									</div>
								</div>
								
								<div class="ukefu-webim-prop">
									<div class="ukefu-webim-tl" style="clear:both;">3、显示“现在咨询”按钮</div>
									<div class="box-item">
										<div class="row">
											<div class="col-lg-8">
												<p>启用访客邀请功能，在弹出的邀请框里显示“接受邀请”的按钮</p>
												<p style="color:#888888;font-size:13px;margin-top:10px;">默认提示文本是：现在咨询</p>
											</div>
											<div class="col-lg-4">
												<input type="text" name="consult_invite_accept" value="${inviteData.consult_invite_accept!'现在咨询'}" autocomplete="off" class="layui-input" onkeyup="$('#consult_invite_accept').text($(this).val())" onchange="$('#consult_invite_accept').text($(this).val())">
											</div>
										</div>
									</div>
								</div>
								
								<div class="ukefu-webim-prop">
									<div class="ukefu-webim-tl" style="clear:both;">4、显示“稍后咨询”按钮</div>
									<div class="box-item">
										<div class="row">
											<div class="col-lg-8">
												<p>启用访客邀请功能，在弹出的邀请框里显示“稍后咨询”的按钮”</p>
												<p style="color:#888888;font-size:13px;margin-top:10px;">默认提示文本是：稍后咨询</p>
											</div>
											<div class="col-lg-4">
												<input type="text" name="consult_invite_later" id="consult_invite_later" value="${inviteData.consult_invite_later!'稍后再说'}"  autocomplete="off" class="layui-input" onkeyup="$('#consult_invite_later').text($(this).val())" onchange="$('#consult_invite_later').text($(this).val())">
											</div>
										</div>
									</div>
								</div>
								
								<div class="ukefu-webim-prop">
									<div class="ukefu-webim-tl" style="clear:both;">5、延时弹出邀请框</div>
									<div class="box-item">
										<div class="row">
											<div class="col-lg-8">
												<p>延时弹出访客邀请框</p>
												<p style="color:#888888;font-size:13px;margin-top:10px;">默认演示：5秒</p>
											</div>
											<div class="col-lg-4">
												<select name="consult_invite_delay">
												  <option value="0" <#if inviteData.consult_invite_delay == 0>selected="selected"</#if>>无延时</option>
												  <option value="1000" <#if inviteData.consult_invite_delay == 1000>selected="selected"</#if>>1秒</option>
												  <option value="2000" <#if inviteData.consult_invite_delay == 2000>selected="selected"</#if>>2秒</option>
												  <option value="3000" <#if inviteData.consult_invite_delay == 3000>selected="selected"</#if>>3秒</option>
												  <option value="4000" <#if inviteData.consult_invite_delay == 4000>selected="selected"</#if>>4秒</option>
												  <option value="5000" <#if inviteData.consult_invite_delay == 5000>selected="selected"</#if>>5秒</option>
												  <option value="10000" <#if inviteData.consult_invite_delay == 10000>selected="selected"</#if>>10秒</option>
												</select> 
											</div>
										</div>
									</div>
								</div>
								
								<div class="ukefu-webim-prop">
									<div class="ukefu-webim-tl">6、自定义访客邀请框背景图片</div>
									<div class="box-item" style="position: relative;">
										<span class="ukefu-logo">
											<img src="<#if inviteData?? && inviteData.consult_invite_bg??>/res/image.html?id=${inviteData.consult_invite_bg?url}<#else>/im/img/webwxgetmsgimg.jpg</#if>" style="height:175px;">
										</span>
										<div class="layui-box layui-upload-button" style="position:absolute;left: 290px;">
											<input type="file" name=invotebg accept="image/gif, image/jpeg, image/png" lay-ext="jpg|png|gif"  class="layui-upload-file" onchange="$('#invotebg').html($(this).val());">
											<span class="layui-upload-icon"><i class="layui-icon"></i>上传图片</span>
										</div>
										<span id="invotebg" style="position:absolute;left: 420px;"></span>
										
										 
									</div>
								</div>
								
								
							</div>
							<div class="col-md-5">
								<div class="ukefu-im-preview" id="ukefu-point" style="height:183px;position: absolute;">
									<div id="ukefu-cousult-invite-dialog" class="ukefu-im-preview-bar ukefu-cousult-invite-dialog ukefu-theme-color theme<#if inviteData??>${inviteData.consult_invite_color!'1'}<#else>1</#if>" style="padding:5px;height:160px;width:400px;background:url('<#if inviteData?? && inviteData.consult_invite_bg??>/res/image.html?id=${inviteData.consult_invite_bg}<#else>'/im/img/webwxgetmsgimg.jpg'</#if>') no-repeat">
										<span style="float:right;">	
											<i class="layui-icon" style="font:size:12px;color:#ffffff;">&#x1006;</i>
										</span>
										<div class="ukefu-cousult-invite-content" id="ukefu-cousult-invite-content">
											${inviteData.consult_invite_content!''}
										</div>
										<div class="ukefu-cousult-invite-btn">
											<button class="layui-btn layui-btn-primary theme${inviteData.consult_invite_color!'1'}" id="invite-btn" style="border-color:#FFFFFF !important;color:#FFFFFF;">${inviteData.consult_invite_later!'稍后再说'}</button>
											<button class="layui-btn layui-btn-primary">${inviteData.consult_invite_accept!'现在咨询'}</button>
										</div>
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-3"></div>
		<div class="col-lg-9">
			<div class="layui-form-item">
	          <div class="layui-input-block">
	            <button class="layui-btn" lay-submit="" lay-filter="formDemo">保存</button>
	            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	          </div>
	        </div>
		</div>
	</div>
</form>

<script language="javascript"> 		
	layui.use('form', function(){
		var form = layui.form();
		form.render('select'); //刷新select选择框渲染
	});
	$(document)
	.ready(
			function() {
				$('.ukefu-im-ping-color .ukefu-im-item')
						.click(
								function() {
									var theme = $(this).attr(
											'data-class');
									$('#ukefu-point .ukefu-theme-color , #invite-btn')
											.each(
													function() {
														$(this)
																.removeClass(
																		"theme1 theme2 theme3 theme4 theme5 theme6")
																.addClass(
																		theme);
													});
									$('.ukefu-im-ping-color .ukefu-im-item')
											.removeClass(
													'ukefu-im-checked');
									$(this).addClass('ukefu-im-checked');
									$('#consult_invite_color').val($(this).attr('data-value'));
								});
			});			
</script>

